import React from 'react';
import avatar from '../images/avatar.jpeg'; // 导入图片

export class Form extends React.Component {
  // 维护表单组件自己实例的数据
  state = {
    txt: 'xxx',
  };
  // 创建 ref
  txtRef = React.createRef();

  // 评论输入变化
  handleTxtChange = (e) => {
    console.log(e.target.value);
    this.setState({
      txt: e.target.value,
    });
  };

  addComment = (e) => {
    // 输入框的处理
    // 发表评论之前，进行数据判断
    if (!this.state.txt.trim()) {
      //   this.txtRef.current.focus();
      return alert('请输入评论内容');
    }

    // 添加评论，要把评论内容传递到父组件
    this.props.handleAddComment(this.state.txt);

    // 发表评论完毕后，1、设置输入框焦点 2、清空评论区
    this.setState({
      txt: '',
    });

    this.txtRef.current.focus();
  };

  render() {
    return (
      <div className="comment-send-container">
        <div>
          <img className="user-head" src={avatar} alt="头像" />
        </div>
        <div className="comment-send">
          <div className="textarea-container">
            <textarea
              cols="80"
              rows="5"
              placeholder="发条友善的评论"
              ref={this.txtRef}
              value={this.state.txt} // 控制值的显示
              onChange={this.handleTxtChange} // 控制值的变化
              className="ipt-txt"
            />
            <button className="comment-submit" onClick={this.addComment}>
              发表评论
            </button>
          </div>
          <div className="comment-emoji">
            <i className="face"></i>
            <span className="text">表情</span>
          </div>
        </div>
      </div>
    );
  }
}
